本文内容不是关于如何选择WordPress主题,而是如何在当前主题中查找CSS样式。页面样式或模板的某个部分通常会出现一些这样或那样的问题。例如,侧边栏菜单和页面其它部分之间有一个边框,我们想删除这个边框,于是到处查找边框的CSS引用却怎么也找不着,怎么办?
CSS侦探
首先,我们来做个侦探游戏——CSS侦探游戏。我们知道问题由什么引发,却找不到源头的具体位置。在上面的例子中就是要找到那个偏移了的边框。
仔细检查某个已生成页面(或测试页面),在侧边栏偏移的边框周围查找可识别的文本。假设在侧边栏的列表中有一个叫做“All About Harry”的日志标题。于是我们查看页面源代码时,就可以在侧边栏中查找这个标题。
在浏览器的菜单栏中点击“查看”菜单,在下拉式菜单中选择“页面源代码”或“源代码”,之后会弹出当前页面的源代码页面。
利用查找工具Ctrl+F开始我们的搜索工作。输入“all about harry”,点击查找。除非日志中有“all about harry”,否则查找工具会把我们直接带到“all about harry”第一次出现的位置,很可能就是侧边栏。如果不在侧边栏中,点击“下一个”,直到在侧边栏中找到“all about harry”。
使用IE浏览器的用户可以利用IE开发辅助工具帮助自己搜索页面上各种设计元素、ID、类。IE开发辅助工具在页面层级内显示各个元素、元素的CSS属性,还可以标出DIV标签、表格等。从Microsoft 网站上可以下载到这个开发辅助工具。
找到需要的内容(all about harry)后,侦探工作就正式开始了。首先在整页源代码“All About Harry”周围查找以下内容,其中sidebar也可能是menu或sidecolumn:
<div id="sidebar"> 或 <div class="sidebar">
这就是侧边栏菜单的主体部分,第一个“嫌疑人”。
接着打开style.css文件,查找sidebar或上一步中发现的其它名称。最终sidebar形式有两种:
#sidebar 或 .sidebar
在CSS选择符下查找侧边栏样式,看其中有否提到边框。侧边栏样式通常是下面这种形式:
#sidebar {position: relative; float: right; width: 170px; color: blue; font-size: 90%; border-right: solid 1px blue; }
找到作案者——边框(border)了!如果这是罪魁祸首,删除这个引用,任务就完成了。
如果还没有找到罪魁祸首,继续搜索。
有时罪魁祸首是最容易被忽略的。导致边框错误的不一定是嫌疑人侧边栏(sidebar),也可能是正文(content)部分。返回页面源代码,查找日志的开始部分的单词。在开始部分前查找:
<div id="content">
其中content也可能是page、post、maincolumn、widecolumn,或者其它别名,总之是装有日志内容的CSS容器。现在返回样式表,检查content中是否有边框。
搜查样式表
如果还没有找出真正的“犯罪者”,侦探活动就不能停止。返回所有样式的藏身地——style.css文件,彻底搜查“border”,仔细寻找任何一个“嫌疑人”。记下选择符的ID名称,如sidebar, menu, content和page,返回页面源代码,判断“嫌疑人”是否就是真正的犯案人。
也可以选中样式表style.css中找到的“嫌疑人”,将之剪切并复制到电脑上类似记事本的TXT文件(如Notepad记事本)中。按以下格式标注被删除的选择符名称:
Removed border: solid 2px green from #content
保存经过编辑的style.css文件,将文件上传到网站。刷新测试日志,看看希望删除的边框是不是已经消失不见。如果边框不见了,说明“罪魁祸首”已经就范。边框还在的话,返回记事本,复制其中的代码并粘贴回style.css文件的“content”部分,将一切恢复原状。
更多CSS帮助
分类:中文手册